<template>
  <div class="app-container">
    <div class="section">
      <div class="section-header">
        <span class="header-badge">1</span>
        <span class="header-title">订单进度</span>
      </div>
      <div class="steps-wrap">
        <el-steps :active="activeIndex" align-center process-status="process" finish-status="success">
          <el-step v-for="(step, idx) in stepList" :key="idx">
            <template #title>
              <span :class="[{ 'title-done': idx < activeIndex }, { 'title-pending': idx >= activeIndex }]">{{ step.label }}</span>
            </template>
            <template #description>
              <span v-if="step.time" class="step-time">{{ parseTime(step.time, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-step>
        </el-steps>
      </div>
    </div>

    <div class="section">
      <div class="section-header">
        <span class="header-badge">2</span>
        <span class="header-title">订单信息</span>
      </div>
      <div class="info-panel">
        <el-descriptions :column="2">
          <el-descriptions-item label="订单编号">{{ preview.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="期望服务时间">{{ parseTime(preview.expectedServiceTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
          <el-descriptions-item label="老人姓名">{{ preview.elderly?.name }}</el-descriptions-item>
          <el-descriptions-item label="床位号">{{ preview.bed?.bedNo }}</el-descriptions-item>
          <el-descriptions-item label="护理项目名称">{{ preview.nursingItem?.name }}</el-descriptions-item>
          <el-descriptions-item label="订单金额">{{ preview.orderAmount }} 元</el-descriptions-item>
          <el-descriptions-item label="下单人">{{ preview.sysUser?.nickName }}</el-descriptions-item>
          <el-descriptions-item label="下单人手机号">{{ preview.sysUser?.phonenumber || '-' }}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">{{ preview.remark }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="footer-bar">
        <el-button type="primary" plain @click="$router.back()">返回</el-button>
      </div>
    </div>
  </div>
  
</template>

<script setup>
const preview = ref(JSON.parse(sessionStorage.getItem('ordermanagement_preview') || '{}'))

// 取不同字段名下的时间，兼容后端字段差异
function getTime(keys) {
  for (const k of keys) {
    const v = preview.value?.[k]
    if (v) return v
  }
  return null
}

const stepList = computed(() => {
  const status = preview.value?.orderStatus
  const createTime = getTime(['createTime', 'orderTime'])
  const payTime = getTime(['payTime', 'paymentTime', 'paidTime'])
  const executeTime = getTime(['executeTime', 'executedTime', 'serviceTime'])
  const finishTime = getTime(['finishTime', 'completedTime'])
  const closeTime = getTime(['closeTime', 'closedTime'])
  const refundTime = getTime(['refundTime', 'refundedTime'])

  // 基础节点
  const nodes = []

  // 关闭
  if (status === '已关闭') {
    nodes.push({ label: '已下单', time: createTime })
    nodes.push({ label: '已关闭', time: closeTime })
    return nodes
  }

  // 退款
  if (status === '已退款') {
    nodes.push({ label: '已下单', time: createTime })
    nodes.push({ label: '已支付', time: payTime })
    if (executeTime) nodes.push({ label: '已执行', time: executeTime })
    nodes.push({ label: '已退款', time: refundTime })
    return nodes
  }

  // 正常流程（下单 -> 支付 -> 执行 -> 完成）
  nodes.push({ label: '已下单', time: createTime })
  nodes.push({ label: '已支付', time: ['已支付', '待执行', '已执行', '已完成'].includes(status) ? (payTime || true) : null })
  nodes.push({ label: '已执行', time: ['已执行', '已完成'].includes(status) ? (executeTime || true) : null })
  nodes.push({ label: '已完成', time: status === '已完成' ? (finishTime || true) : null })
  return nodes
})

// 已完成节点数量（用于激活步骤索引）
const activeIndex = computed(() => stepList.value.filter(s => !!s.time).length)
</script>

<style scoped>
.section { background: #fff; border-radius: 6px; margin-bottom: 16px; }
.section + .section { margin-top: 16px; }
.section-header { height: 56px; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid #ebeef5; background: #fafafa; }
.header-badge { width: 24px; height: 24px; border-radius: 50%; background: #f56c6c; color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; font-weight: 600; }
.header-title { font-weight: 600; color: #303133; }
.steps-wrap { padding: 16px 24px; position: relative; }
.step-time { margin-top: 8px; color: #909399; font-size: 12px; display: inline-block; }
.info-panel { padding: 16px 24px; }
.footer-bar { padding: 0 24px 16px; text-align: center; }

/* 将已完成步骤样式改为蓝色，未完成为灰色 */
:deep(.el-steps--horizontal) { --el-color-primary: #1677ff; }
:deep(.el-step__head.is-finish) { color: #1677ff; border-color: #1677ff; }
:deep(.el-step__title.is-finish) { color: #1677ff; }
:deep(.el-step__head.is-process) { color: #1677ff; border-color: #1677ff; }
.title-done { color: #1677ff; font-weight: 600; }
.title-pending { color: #c0c4cc; }
</style>


